<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>红包转余额</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/balance.css" />
</head>            
<body>
	<div class="page-group ms-controller" :controller="zpackets">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">红包转余额</h1>
            </header>
            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
                <div class="buttons-tab">
                    <a :on-click="@typeChoose(1)" :class="@type==1?'tab-link active button':'tab-link button'">红包转余额</a>
                    <a :on-click="@typeChoose(2)" :class="@type==2?'tab-link active button':'tab-link button'">转换明细</a>
                </div>
            </div>                        
            <div class="content visibility infinite-scroll infinite-scroll-bottom" style="top: 5rem;" :css="{'padding-top': @type==1?0:'50px'}" data-distance="100">
    			<div :visible="@type==2" style="position: fixed; width: 100%; top: 5rem; background-color: #eee; height: 50px; line-height: 50px;">
                	<div style="float: left; width:50%;font-size: .75rem;text-align: right;">转换总额:<span style="margin-left: .2em;color: #f00">￥{{@data.total_zpackets||0}}</span></div>
                   
                </div>
                <div :visible="@type==2" class="integral_balance_first" :for="el in @list">
                	<div>
                    	<span><b style="font-size: .8rem">红包转余额</b></span>
                    	<span style="float: right" :css="{'color': 'red'}">{{+el.money}}</span>
                    </div>
                    <div>
                        <span style="color: #999">{{el.create_time||0}}</span>
                    </div>
                </div>
                <div :visible="@more" class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
                <div :visible="@type==1" class="tabs">
                    <div class="tab active">
                        <div class="list-block" style="margin:0; padding:0;">
	                        <ul class="balance">
	                        	<li style="background: #eee; padding-left: 5%;height: 50px;line-height: 50px;font-size: .8rem">您当前可转换的红包余额为:<b style=" margin-left:12px;color:red;">￥{{@info.red_packets}}</b></li>
	                             <li class="first_balance" style="height: auto;padding-left: 5%;color:red;line-height: 40px;font-size: .6rem;">说明：转换金额必须是100的整数倍</li>
	                            
	                            <li>
	                                <div class="item-content">
	                                    <div class="item-inner">
	                                        <div class="item-title label">转换金额</div>
	                                        <div class="item-input">
	                                            <input type="text" :duplex="money" placeholder="请填写转换金额">
	                                        </div>
	                                    </div>
	                                </div>
	                            </li>
	                        </ul> 
                        	<button :on-click="@submit" id="submit" style="color: #fff; background: #09f" class="balance_btn">确认提交</button> 
                        </div>
                    </div>                 
                </div>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script>
	var zpackets = avalon.define({
		$id: "zpackets",
		list: [],
		data: {},
		info: {},
        money: "",
        name: "",
        phone: "",
        page_num: 1,
        page_size: 10,
        loading: false,
        more: false,
        type: Mall.parseUrl( window.location.href ).type,
        getList: function( o ){
            var postData = {
                page_num: zpackets.page_num,
                page_size: zpackets.page_size 
            }
            if( zpackets.loading ){
                return
            }
            zpackets.loading = true;
            Mall.request( "/api/ZpacketsList", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                    	zpackets.data = data.data;
                        if( o ){
                        	zpackets.list = zpackets.list.concat( data.data.list );
                        }
                        else{
                        	zpackets.list = data.data.list;
                        }
                        if( zpackets.page_num == data.data.page_total ){
                        	zpackets.more = false;
                        }
                        else{
                            if( data.data.list.length == 0 ){
                            	zpackets.more = false;
                            }
                            else{
                                if( zpackets.type != 1 ){
                                	zpackets.more = true;
                                }
                            }
                        }
                        zpackets.page_num ++;
                    }
                    zpackets.loading = false;
                } )
        },
		typeChoose: function( t ){
            var url = window.location.href.split( "?type=" )[0]+"?type="+t;
            zpackets.type = t;
            zpackets.page_num = 1;
			window.history.replaceState(null, null, url);
            if( t == 2 ){
            	zpackets.getList();
            }
            else{
                if( $( ".empty" ).length ){
                    $( ".empty" ).remove();
                }
                zpackets.more = false;
            }
		},
        getInfo: function(status){
            Mall.request( "/api/UserInfo" )
            	.always( function( data ){
            		if( data.error_code == 0 ){
            			zpackets.info = data.data;
            			$( ".content" ).removeClass( "visibility" );
            		}
            	} )
        },
        submit: function(){
            var postData = {

                money: zpackets.money
            }
            $.prompt("请输入支付密码", function( value ){
            	postData.pay_password = value;
            	Mall.request( "/api/ZpacketsSubmit", postData )
            		.always( function( data ){
            			if( data.error_code == 0 ){
            				$.toast( "转账成功", 1000, "success", function(){
            					zpackets.typeChoose(2);
            				} )
            			}
            		} )
            })
            $( "input.modal-text-input" ).attr( "type", "password" )
        },
        infinite: function(){
            $(document).on('infinite', '.infinite-scroll-bottom',function() {
                if( zpackets.more ){
                	zpackets.getList( true );
                }
            });
            $.init();
        }
	})
    zpackets.infinite();
	zpackets.type == 2 && zpackets.getList();
	zpackets.getInfo();
    avalon.scan( document.body );
</script>
</body>
</html>